<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>







<div id="app">
  
  <input type="text" v-model="n1">
    
  <select v-model="opt">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>

  <input type="text" v-model="n2">
  
  <input type="button" value="=" @click="calc">
  
  <input type="text" v-model="result">

</div>









<br>
<script src="vue.js"></script>

<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
    n1:0,
    n2:0,
  	result:0,
    opt:"+"
  },

  methods:{

//正式开发使用，安全有效
     calc(){
          switch(this.opt){
            case "+":
              this.result = parseInt(this.n1)+parseInt(this.n2)
              break;

            case "-":
              this.result = parseInt(this.n1)-parseInt(this.n2)
              break;

            case "*":
              this.result = parseInt(this.n1)*parseInt(this.n2)
              break;
              case "/":
                this.result = parseInt(this.n1)/parseInt(this.n2)
                break;
          }


      },



//eval() 方法不安全，投机取巧，正式开发不建议使用
  /*  calc(){
        var codeStr = 'parseInt(this.n1)' +this.opt + 'parseInt(this.n2)'
        this.result = eval(codeStr)


    }
*/




  }

})





</script>

	
</body>
</html>